<div class="schedule-main-container">
  <div class="top-wrap">
    年份：
    <nz-select nzAllowClear nzPlaceHolder="年份" style="width: 130px;" [(ngModel)]="year">
      <nz-option nzLabel="2019年" [nzValue]="2019"></nz-option>
      <nz-option nzLabel="2020年" [nzValue]="2020"></nz-option>
      <nz-option nzLabel="2021年" [nzValue]="2021"></nz-option>
      <nz-option nzLabel="2022年" [nzValue]="2022"></nz-option>
      <nz-option nzLabel="2023年" [nzValue]="2023"></nz-option>
    </nz-select>

    <div class="button-group">
      <button nz-button nzType="primary" (click)="auto()">
        自动排班
      </button>
      <button *ngIf="!isEditing" nz-button nzType="primary" (click)="edit()">
        <i nz-icon nzType="tool" nzTheme="outline"></i>
        维护
      </button>
      <button *ngIf="isEditing" nz-button nzType="primary" (click)="save()">保存</button>
      <button *ngIf="isEditing" nz-button (click)="isEditing = !isEditing">取消</button>
      <button nz-button nzType="danger" (click)="export()">
        <i nz-icon nzType="download" nzTheme="outline"></i>
        导出
      </button>
    </div>
  </div>

  <div class="content">
    <div class="left">
      <div class="left-top">

        <div class="left-top-btn">
          <div class="triangle-wrap" (click)="toLastMonth()">
            <div class="triangle-left"></div>
          </div>
          <div class="triangle-wrap" (click)="toNextMonth()">
            <div class="triangle-right"></div>
          </div>
        </div>
        <label class="left-title">{{selectedValue.getFullYear()}}年</label>
        <label class="left-title">{{selectedValue.getMonth() + 1}}月</label>
      </div>


      <ng-container *ngIf="listDataMap.length>0 && isEditing">
        <nz-calendar [nzDateFullCell]="dateFullCellTpl" (nzSelectChange)="selectChange($event)"
          [(ngModel)]="selectedValue" [(nzMode)]="mode">
        </nz-calendar>
        <ng-template #dateFullCellTpl let-date>
          <ng-container *ngIf="date.getMonth()+1 !== month">
            <div style="height: 100%;width: 100%;background: #FBFBFB">
              <div style="text-align: right;padding-right: 5px;">{{date.getDate()}}</div>
            </div>
          </ng-container>
          <ng-container *ngIf="date.getMonth()+1 == month">
            <div style="text-align: right;padding-right: 5px;">{{date.getDate()}}</div>
            <div class="schedule-date" *ngFor="let item of scheduleMap[date|date:'yyyy-MM-dd'];">
              <span>{{item.planName}}：</span>
              <nz-select nzPlaceHolder="请选择" nzSize="small" [(ngModel)]="item.member">
                <nz-option *ngFor="let people of peopleOption" [nzValue]="people.id" [nzLabel]="people.name">
                </nz-option>
              </nz-select>
            </div>
          </ng-container>
        </ng-template>
      </ng-container>

      <ng-container *ngIf="listDataMap.length>0 && (!isEditing)">
        <nz-calendar [nzDateFullCell]="dateFullCellTpl" (nzSelectChange)="selectChange($event)"
          [(ngModel)]="selectedValue" [(nzMode)]="mode">
        </nz-calendar>
        <ng-template #dateFullCellTpl let-date>
          <ng-container *ngIf="date.getMonth()+1 !== month">
            <div style="height: 100%;width: 100%;background: #FBFBFB">
              <div style="text-align: right;padding-right: 5px;">{{date.getDate()}}</div>
            </div>
          </ng-container>
          <ng-container *ngIf="date.getMonth()+1 == month">
            <div style="text-align: right;padding-right: 5px;">{{date.getDate()}}</div>
            <div class="schedule-date" *ngFor="let item of scheduleMap[date|date:'yyyy-MM-dd'];">
              <span>{{item.planName}}：</span>
              <span>{{item.memberName}}</span>
            </div>
          </ng-container>
        </ng-template>
      </ng-container>


    </div>
    <div class="right">
      <div class="right-title">人员值班负荷统计</div>
      <div echarts [options]="chartData" style="height: calc(100vh - 250px);"></div>
    </div>
  </div>


  <nz-modal nzClassName="dispatch-modal" nzWidth="600" [(nzVisible)]="modalShow" [nzTitle]="title"
    (nzOnCancel)="modalShow=false">
    <ng-template #title>
      <div class="apply-title-wrap">
        <span class="title-text">自动排班</span>
      </div>
    </ng-template>
    <div *nzModalFooter></div>
    <div style="padding: 20px 10px 10px 10px;">
      <form nz-form [formGroup]="autoForm">
        <div nz-row [nzGutter]="24">
          <div nz-col [nzSpan]="24">
            <nz-form-item nzFlex>
              <nz-form-label [nzSm]="4" [nzXs]="24">排班月份</nz-form-label>
              <nz-form-control>
                <nz-month-picker [nzDisabledDate]="disabledDate" formControlName="dateVal" nzPlaceHolder="请选择年月">
                </nz-month-picker>
              </nz-form-control>
            </nz-form-item>
          </div>

          <div nz-col [nzSpan]="24">
            <nz-form-item nzFlex>
              <nz-form-label [nzSm]="4" [nzXs]="24">排班人员</nz-form-label>
              <nz-form-control>
                <nz-select nzMode="multiple" nzPlaceHolder="请选择" formControlName="member" style="width: 450px">
                  <nz-option *ngFor="let item of peopleOption" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>
      </form>

      <div class="modal-button-wrap">
        <button nz-button class="btn-1" nzType="primary" (click)="onModalConfirm()">确认</button>
      </div>
    </div>

  </nz-modal>
</div>
